import React, {Component} from 'react';
import {
  View,
  Text,
  Alert,
  Button,
  ToastAndroid,
  TextInput,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
  Image,
} from 'react-native';
import {proposalList} from '../../api/index';
// import {getData} from '../../../storage';
import {HeaderLeft} from '../../components';
import {setToastMsg} from '../../actions/index';
import {Market} from '../../images';
//import {Colors} from 'react-native/Libraries/NewAppScreen';
//import {getStorage} from '../../storage';
let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
let headerHeightRatio = 0.044;
let barLength = widthScreen * 0.9;
let red = '#FF6666';
let yellow = '#FF9933';
let purple = '#8587FF';
let blue = '#45BAFF';

let hostAddress = 'http://47.104.75.42:9000';
let typeColor1 = '#9966FF';
let typeColor2 = '#9966FF';
TextInput.defauetProps = Object.assign({}, TextInput.defaultProps, {
  defaultProps: false,
});
Text.defaultProps = Object.assign({}, Text.defaultProps, {
  allowFontScaling: false,
});

//页面在这里
export default class ProposalList extends Component {
  static defaultProps = {
    title: '提案列表',
    stage: 2,
  };

  static navigationOptions = ({navigation}) => ({
    headerTitle: '提案列表',
    headerStyle: {
      backgroundColor: '#fff',
      borderBottomWidth: 0,
      height: 44,
      elevation: 0,
    },
    headerTitleStyle: {
      flex: 1,
      textAlign: 'center',
      color: '#333',
      fontSize: 17,
      fontWeight: '400',
    },
    headerLeft: <HeaderLeft triggerBack={() => navigation.goBack()} />,
    headerRight: (
      <TouchableOpacity
        style={{marginRight: 10}}
        onPress={() => {
          navigation.navigate('History');
        }}>
        <Image source={Market.history} style={{width: 16, height: 16}} />
      </TouchableOpacity>
    ),
  });

  constructor(props) {
    super(props);
    //TODO 获得上一个页面传过来的stage值
    const stage = this.props.navigation.getParam('stage');
    this.state = {
      proposalEntry: [],
      stage: stage,
      refresh: false,
    };
  }
  updateComponent(i) {
    try {
      let stageResult = this.state.proposalEntry[i].stageResult;
      let count = parseInt(stageResult.substr(0, 1));
      count++;
      stageResult = `${count}${stageResult.substr(1)}`;
      this.state.proposalEntry[i].stageResult = stageResult;
    } catch (e) {}
    this.setState({
      refresh: !this.state.refresh,
    });
  }
  async getProposalList() {
    let paramter = {stage: this.state.stage};
    let proposalEntry = await proposalList(paramter);
    setToastMsg(proposalEntry.message);
    this.setState({
      //TODO：fetch函数
      proposalEntry: proposalEntry.data,
    });
  }
  loadProposalEntry() {
    let allProposalEntry = [];
    let color = red;
    let stage = parseInt(this.state.stage);
    switch (this.state.stage) {
      case 1:
        color = red;
        break;
      case 2:
        color = yellow;
        break;
      case 3:
        color = purple;
        break;
      case 4:
        color = blue;
        break;
    }
    for (let i = 0; i < this.state.proposalEntry.length; i++) {
      allProposalEntry.push(
        <ProposalEntry
          key={this.state.proposalEntry[i].id}
          id={this.state.proposalEntry[i].id}
          title={this.state.proposalEntry[i].title}
          stageResult={this.state.proposalEntry[i].stageResult}
          create_time={this.state.proposalEntry[i].create_time}
          name={this.state.proposalEntry[i].name}
          color={color}
          onPressFunc={() => {
            this.props.navigation.navigate('ProposalInformation', {
              id: this.state.proposalEntry[i].id,
              backFunc: i => this.updateComponent(i),
              index: i,
            });
          }}
        />,
      );
      allProposalEntry.push(
        <View
          key={10000 - i}
          style={{height: 0.3, backgroundColor: '#CCCCCC'}}
        />,
      );
      allProposalEntry.push(
        <View
          key={i * -1 - 1}
          style={{height: heightScreen * 0.007, backgroundColor: '#F3F7FA'}}
        />,
      );
    }
    return allProposalEntry;
  }

  async componentDidMount() {
    await this.getProposalList();
  }

  //TODO:render
  render() {
    // if (this.state.isLoading) {
    //   return <View />;
    // }
    if (this.state.stage === 1) {
      typeColor1 = red;
      typeColor2 = red;
      return (
        <ScrollView style={{backgroundColor: '#F3F7FA'}}>
          <View style={{height: heightScreen * 0.018}} />
          <View style={ProposalListStyle.viewStyle}>
            <Text style={ProposalListStyle.titleStyle1}>联名规则</Text>
            <View
              style={{
                backgroundColor: typeColor2,
                width: widthScreen * 0.86,
                height: 0.8,
                marginLeft: widthScreen * 0.02,
                marginTop: heightScreen * 0.002,
              }}
            />
            <View style={{flexDirection: 'row'}}>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.015,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
              </View>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <Text style={ProposalListStyle.text1}>
                  仅董事可以联名，普通用户可以查看
                </Text>
                <Text style={ProposalListStyle.text2}>联名后不可撤回</Text>
                <Text style={ProposalListStyle.text2}>
                  联名人数超过半数董事，立即进入表决阶段
                </Text>
              </View>
            </View>
            {/*<TouchableOpacity*/}
            {/*  style={{*/}
            {/*    marginLeft: widthScreen * 0.55,*/}
            {/*    width: widthScreen * 0.35,*/}
            {/*  }}>*/}
            {/*  <Text*/}
            {/*    style={{*/}
            {/*      color: typeColor2,*/}
            {/*      fontSize: heightScreen * 0.0175,*/}
            {/*      fontFamily: 'MicrosoftYaHei',*/}
            {/*      marginTop: heightScreen * 0.017,*/}
            {/*    }}>*/}
            {/*    (点击查看详细说明)*/}
            {/*  </Text>*/}
            {/*</TouchableOpacity>*/}
          </View>
          <View style={{height: heightScreen * 0.018}} />
          {this.loadProposalEntry()}
        </ScrollView>
      );
    } else if (this.state.stage === 2) {
      typeColor1 = yellow;
      typeColor2 = yellow;
      return (
        <ScrollView style={{backgroundColor: '#F3F7FA'}}>
          <View style={{height: heightScreen * 0.018}} />
          <View style={ProposalListStyle.viewStyle}>
            <Text style={ProposalListStyle.titleStyle1}>表决规则</Text>
            <View
              style={{
                backgroundColor: typeColor2,
                width: widthScreen * 0.86,
                height: 0.8,
                marginLeft: widthScreen * 0.02,
                marginTop: heightScreen * 0.002,
              }}
            />
            <View style={{flexDirection: 'row'}}>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.015,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
              </View>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <Text style={ProposalListStyle.text1}>
                  仅有提案董事可以上传或更改执行报告
                </Text>
                <Text style={ProposalListStyle.text2}>
                  所有用户有权查看报告
                </Text>
                <Text style={ProposalListStyle.text2}>
                  报告上传后，由提案董事确认进入验收阶段
                </Text>
              </View>
            </View>
            {/*<TouchableOpacity*/}
            {/*  style={{*/}
            {/*    marginLeft: widthScreen * 0.55,*/}
            {/*    width: widthScreen * 0.35,*/}
            {/*  }}>*/}
            {/*  <Text*/}
            {/*    style={{*/}
            {/*      color: typeColor2,*/}
            {/*      fontSize: heightScreen * 0.0175,*/}
            {/*      fontFamily: 'MicrosoftYaHei',*/}
            {/*      marginTop: heightScreen * 0.017,*/}
            {/*    }}>*/}
            {/*    (点击查看详细说明)*/}
            {/*  </Text>*/}
            {/*</TouchableOpacity>*/}
          </View>
          <View style={{height: heightScreen * 0.018}} />
          {this.loadProposalEntry()}
        </ScrollView>
      );
    } else if (this.state.stage === 3) {
      typeColor1 = '#9966FF';
      typeColor2 = purple;
      return (
        //TODO:
        <ScrollView style={{backgroundColor: '#F3F7FA'}}>
          <View style={{height: heightScreen * 0.018}} />
          <View style={ProposalListStyle.viewStyle}>
            <Text style={ProposalListStyle.titleStyle1}>执行规则</Text>
            <View
              style={{
                backgroundColor: typeColor2,
                width: widthScreen * 0.86,
                height: 0.8,
                marginLeft: widthScreen * 0.02,
                marginTop: heightScreen * 0.002,
              }}
            />
            <View style={{flexDirection: 'row'}}>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.015,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
              </View>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <Text style={ProposalListStyle.text1}>
                  仅有提案董事可以上传或更改执行报告
                </Text>
                <Text style={ProposalListStyle.text2}>
                  所有用户有权查看报告
                </Text>
                <Text style={ProposalListStyle.text2}>
                  报告上传后，由提案董事确认进入验收阶段
                </Text>
              </View>
            </View>
            {/*<TouchableOpacity*/}
            {/*  style={{*/}
            {/*    marginLeft: widthScreen * 0.55,*/}
            {/*    width: widthScreen * 0.35,*/}
            {/*  }}>*/}
            {/*  <Text*/}
            {/*    style={{*/}
            {/*      color: typeColor2,*/}
            {/*      fontSize: heightScreen * 0.0175,*/}
            {/*      fontFamily: 'MicrosoftYaHei',*/}
            {/*      marginTop: heightScreen * 0.017,*/}
            {/*    }}>*/}
            {/*    (点击查看详细说明)*/}
            {/*  </Text>*/}
            {/*</TouchableOpacity>*/}
          </View>
          <View style={{height: heightScreen * 0.018}} />
          {this.loadProposalEntry()}
        </ScrollView>
      );
    } else if (this.state.stage === 4) {
      typeColor1 = blue;
      typeColor2 = blue;
      return (
        <ScrollView style={{backgroundColor: '#F3F7FA'}}>
          <View style={{height: heightScreen * 0.018}} />
          <View style={ProposalListStyle.viewStyle}>
            <Text style={ProposalListStyle.titleStyle1}>验收规则</Text>
            <View
              style={{
                backgroundColor: typeColor2,
                width: widthScreen * 0.86,
                height: 0.8,
                marginLeft: widthScreen * 0.02,
                marginTop: heightScreen * 0.002,
              }}
            />
            <View style={{flexDirection: 'row'}}>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.015,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
              </View>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <Text style={ProposalListStyle.text1}>
                  仅有提案董事可以上传或更改执行报告
                </Text>
                <Text style={ProposalListStyle.text2}>
                  所有用户有权查看报告
                </Text>
                <Text style={ProposalListStyle.text2}>
                  报告上传后，由提案董事确认进入验收阶段
                </Text>
              </View>
            </View>
            {/*<TouchableOpacity*/}
            {/*  style={{*/}
            {/*    marginLeft: widthScreen * 0.55,*/}
            {/*    width: widthScreen * 0.35,*/}
            {/*  }}>*/}
            {/*  <Text*/}
            {/*    style={{*/}
            {/*      color: typeColor2,*/}
            {/*      fontSize: heightScreen * 0.0175,*/}
            {/*      fontFamily: 'MicrosoftYaHei',*/}
            {/*      marginTop: heightScreen * 0.017,*/}
            {/*    }}>*/}
            {/*    (点击查看详细说明)*/}
            {/*  </Text>*/}
            {/*</TouchableOpacity>*/}
          </View>
          <View style={{height: heightScreen * 0.018}} />
          {this.loadProposalEntry()}
        </ScrollView>
      );
    } else if (this.state.stage === 5) {
      return (
        <ScrollView style={{backgroundColor: '#F3F7FA'}}>
          <View style={{height: heightScreen * 0.018}} />
          <View style={ProposalListStyle.viewStyle}>
            <Text style={ProposalListStyle.titleStyle1}>执行规则</Text>
            <View
              style={{
                backgroundColor: typeColor2,
                width: widthScreen * 0.86,
                height: 0.8,
                marginLeft: widthScreen * 0.02,
                marginTop: heightScreen * 0.002,
              }}
            />
            <View style={{flexDirection: 'row'}}>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.015,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
                <View
                  style={{
                    backgroundColor: typeColor2,
                    width: heightScreen * 0.008,
                    height: heightScreen * 0.008,
                    borderRadius: heightScreen * 0.004,
                    marginLeft: heightScreen * 0.02,
                    marginTop: heightScreen * 0.046,
                  }}
                />
              </View>
              <View>
                <View style={{height: heightScreen * 0.02}} />
                <Text style={ProposalListStyle.text1}>
                  仅有提案董事可以上传或更改执行报告
                </Text>
                <Text style={ProposalListStyle.text2}>
                  所有用户有权查看报告
                </Text>
                <Text style={ProposalListStyle.text2}>
                  报告上传后，由提案董事确认进入验收阶段
                </Text>
              </View>
            </View>
            {/*<TouchableOpacity*/}
            {/*  style={{*/}
            {/*    marginLeft: widthScreen * 0.55,*/}
            {/*    width: widthScreen * 0.35,*/}
            {/*  }}>*/}
            {/*  <Text*/}
            {/*    style={{*/}
            {/*      color: typeColor2,*/}
            {/*      fontSize: heightScreen * 0.0175,*/}
            {/*      fontFamily: 'MicrosoftYaHei',*/}
            {/*      marginTop: heightScreen * 0.017,*/}
            {/*    }}>*/}
            {/*    (点击查看详细说明)*/}
            {/*  </Text>*/}
            {/*</TouchableOpacity>*/}
          </View>
          <View style={{height: heightScreen * 0.018}} />
          {this.loadProposalEntry()}
        </ScrollView>
      );
    }
  }
}

class ProposalEntry extends Component {
  static defaultProps = {
    title: '提案列表',
    type: 3,
  };

  constructor(props) {
    super(props);
  }

  //TODO:render
  render() {
    const {onPressFunc} = this.props;
    return (
      <TouchableOpacity onPress={() => onPressFunc()}>
        <View
          style={{height: heightScreen * 0.096, backgroundColor: '#FFFFFF'}}>
          <View style={{flexDirection: 'row'}}>
            <View
              style={{
                marginTop: heightScreen * 0.008,
                marginLeft: heightScreen * 0.03,
                width: heightScreen * 0.01,
                height: heightScreen * 0.033,
                backgroundColor: this.props.color,
              }}
            />
            <View>
              <Text style={proposalEntryStyle.title}>{this.props.title}</Text>
              <View
                style={{
                  marginLeft: heightScreen * 0.007,
                  height: 0.5,
                  width: heightScreen * 0.311,
                  backgroundColor: this.props.color,
                }}
              />
              <Text style={proposalEntryStyle.text1}>
                提案人：{this.props.name}
              </Text>
              <Text style={proposalEntryStyle.text2}>
                提案时间：{this.props.create_time}
              </Text>
            </View>
            <Text
              style={{
                textAlign: 'right',
                color: this.props.color,
                fontSize: heightScreen * 0.019,
                //fontFamily: 'MicrosoftYaHei',
                marginTop: heightScreen * 0.014,
                width: 375 * 0.22,
                marginRight: 5,
              }}>
              {this.props.stageResult}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

//TODO:style
let ProposalListStyle = StyleSheet.create({
  viewStyle: {
    width: 375 * 0.9,
    height: heightScreen * 0.261,
    backgroundColor: '#FFFFFF',
    borderRadius: heightScreen * 0.008,
    marginLeft: widthScreen * 0.05,
  },
  titleStyle1: {
    fontSize: heightScreen * 0.022,
    //fontFamily: 'MicrosoftYaHei',
    marginLeft: widthScreen * 0.024,
    marginTop: heightScreen * 0.023,
  },
  lineStyle: {
    backgroundColor: typeColor2,
    width: widthScreen * 0.86,
    height: 0.8,
    marginLeft: widthScreen * 0.02,
    marginTop: heightScreen * 0.002,
  },
  point1: {
    backgroundColor: typeColor2,
    width: heightScreen * 0.008,
    height: heightScreen * 0.008,
    borderRadius: heightScreen * 0.004,
    marginLeft: heightScreen * 0.02,
    marginTop: heightScreen * 0.015,
  },
  point2: {
    backgroundColor: typeColor2,
    width: heightScreen * 0.008,
    height: heightScreen * 0.008,
    borderRadius: heightScreen * 0.004,
    marginLeft: heightScreen * 0.02,
    marginTop: heightScreen * 0.046,
  },
  text1: {
    color: '#656565',
    fontSize: heightScreen * 0.02,
    //fontFamily: 'MicrosoftYaHei',
    marginTop: heightScreen * 0.005,
    marginLeft: heightScreen * 0.018,
  },
  text2: {
    color: '#656565',
    fontSize: heightScreen * 0.02,
    //fontFamily: 'MicrosoftYaHei',
    marginTop: heightScreen * 0.027,
    marginLeft: heightScreen * 0.018,
  },
  colorText1: {
    //textAlign: 'right',
    color: typeColor2,
    fontSize: heightScreen * 0.0175,
    //fontFamily: 'MicrosoftYaHei',
    marginTop: heightScreen * 0.017,
    //marginRight: heightScreen * 0.020
  },
});
let proposalEntryStyle = StyleSheet.create({
  rect: {
    marginTop: heightScreen * 0.008,
    marginLeft: heightScreen * 0.03,
    width: heightScreen * 0.01,
    height: heightScreen * 0.033,
    backgroundColor: typeColor1,
  },
  line: {
    marginLeft: heightScreen * 0.007,
    height: 0.5,
    width: heightScreen * 0.311,
    backgroundColor: typeColor1,
  },
  title: {
    marginTop: heightScreen * 0.006,
    marginBottom: heightScreen * 0.002,
    marginLeft: heightScreen * 0.006,
    fontSize: heightScreen * 0.024,
    color: '#000000',
    //fontFamily: 'MicrosoftYaHei',
    fontWeight: '400',
  },
  colorTitle: {
    textAlign: 'right',
    color: typeColor2,
    fontSize: heightScreen * 0.019,
    //fontFamily: 'MicrosoftYaHei',
    marginTop: heightScreen * 0.014,
    width: widthScreen * 0.27,
  },
  text1: {
    marginLeft: heightScreen * 0.006,
    fontSize: heightScreen * 0.018,
    //fontFamily: 'MicrosoftYaHei',
    color: '#666666',
    marginTop: heightScreen * 0.005,
  },
  text2: {
    marginLeft: heightScreen * 0.006,
    fontSize: heightScreen * 0.018,
    //fontFamily: 'MicrosoftYaHei',
    color: '#666666',
  },
});
